<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.query" placeholder="姓名/手机号等条件" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleQuery" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleAdd" icon="el-icon-plus">添加</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table :data="rows" style="width: 100%;overflow: auto;"  stripe border highlight-current-row v-loading="pageLoading" size="mini">
      <el-table-column label="客户名称" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户表名称" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cusTableName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本地表名称" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.localTableName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户临时表" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.tmpTableName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户表主键" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cusTableKey }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本地主键" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.tmpTableKey }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--<router-link :to="{name:'link',params:{id:scope.row.id}}"><el-button size="mini" type="primary"><i class="el-icon-edit"></i>字段维护</el-button></router-link>-->
          <el-button
            size="mini"
            type="primary"
            @click="handField(scope.$index, scope.row)"><i class="el-icon-edit"></i>字段维护</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--底部-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--对话框-->
    <el-dialog :title="form && form.id ? '编辑' : '新增' " :visible.sync="formVisible" :close-on-click-modal="false">
      <el-form :model="form" label-width="120px" :rules="rules" ref="form" size="mini" :inline="true">
        <el-form-item label="客户名称" prop="customerCode">
          <el-input v-model="form.customerCode" :disabled="form && form.id "/>
        </el-form-item>
        <el-form-item label="本地表" prop="customerName">
          <el-input v-model="form.customerName"/>
        </el-form-item>
        <el-form-item label="客户表" prop="sendURL">
          <el-input v-model="form.sendURL"/>
        </el-form-item>
        <el-form-item label="临时表" prop="sendURL">
          <el-input v-model="form.sendURL"/>
        </el-form-item>
        <el-form-item label="本地表主键" prop="sendURL">
          <el-input v-model="form.sendURL"/>
        </el-form-item>
        <el-form-item label="临时表主键" prop="sendURL">
          <el-input v-model="form.sendURL"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible = false">取消</el-button>
        <el-button type="primary" @click.native="handleSubmit" :loading="formLoading">提交</el-button>
      </div>
    </el-dialog>

    <!-- Table -->
    <el-dialog title="字段维护" :visible.sync="dialogTableVisible">
      <el-col :span="24" class="" style="padding-bottom: 0px;">
        <el-form :inline="true"  size="mini" >
          <el-form-item label="客户字段">
            <el-input v-model="addField.cusField" placeholder="客户字段名称"></el-input>
          </el-form-item>
          <el-form-item label="字段来源" prop="updateFileType">
            <el-select v-model="addField.sourceField" placeholder="请选择字段来源">
              <el-option v-for="field in addField" :label="field.code" :value="field.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-table :data="FieldData" style="width: 100%;overflow: auto;"  stripe border highlight-current-row v-loading="pageLoading" size="mini">
        <el-table-column label="客户字段" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.cusField }}</span>
          </template>
        </el-table-column>
        <el-table-column label="本地字段" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.localField }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </section>
</template>

<script>
  const rules = {
    name: [{
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }],
    sex: [{
      required: true,
      message: '请选择性别',
      trigger: 'change'
    }]
  }

  let data = () => {
    return {
      addField:[],
      FieldData: [],
      //页码
      page: 1,
      //每页数量
      size: 10,
      //总数
      total: 0,
      //查询条件
      filters: {},
      //页面数据
      rows: [],
      //页面载入状态
      pageLoading: false,
      //列表高度
      clientHeight: '100%',
      //表单数据
      form: {},
      //验证规则
      rules: rules,
      //对话框隐藏状态
      formVisible: false,
      dialogTableVisible:false,
      //表单提交状态
      formLoading: false,
      mytest:true
    }
  }

  let handleAdd = function() {
    this.form = {}
    // this.form.sex = 1
    this.formVisible = true
  }

  let handleEdit = function(index, row) {
    this.form = Object.assign({}, row)
    // this.form.jdkType=0
    this.formVisible = true
  }

  let handField = function (index,row) {
    this.dialogTableVisible = true;
    // 下拉框赋值
    this.$axios.get('/api/table/getFieldItems/'+row.localTableName).then(res => {
      this.addField=res.data
    }).catch(e => this.pageLoading = false)

    //填充数据
    // 调用post请求
    this.$axios.get('/api/table/getField/'+row.id).then(res => {
      if (!res.data)
        return
      //页面元素赋值
      this.FieldData = res.data
    }).catch(e => this.pageLoading = false)
  }

  let handleDelete = function(index, row) {
    if (this.pageLoading)
      return

    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.pageLoading = true
      this.$axios.get('/api/member/remove/' + row.id).then(res => {
        this.pageLoading = false
        if (!res.data.success) {
          this.$message({
            type: 'error',
            message: res.data.message
          })
          return
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.page = 1
        this.getRows()
      }).catch(e => this.pageLoading = false)
    }).catch(e => {})
  }

  let getRows = function() {
    if (this.pageLoading)
      return
    this.pageLoading = true

    let params = {
      page: this.page,
      size: this.size,
      query: this.filters.query
    }
    //调用post请求
    this.$axios.post('/api/table/getPage', params).then(res => {
      this.pageLoading = false
      if (!res.data.rows)
        return
      //总数赋值
      this.total = res.data.total
      this.page++;
      //页面元素赋值
      this.rows = res.data.rows
    }).catch(e => this.pageLoading = false)
  }

  let onSubmit = function() {
    if (this.formLoading)
      return

    this.$refs.form.validate(valid => {
      if (!valid)
        return

      this.formLoading = true

      //调用http协议
      this.$axios.post('/api/table/save', this.form).then(res => {
        this.formLoading = false
        if (!res.data.success) {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          });
          return
        }
        this.$message({
          type: 'success',
          message: '保存成功!'
        })

        //重新载入数据
        this.page = 1
        this.getRows()
        this.formVisible = false
      }).catch(e => this.formLoading = false)
    })
  }
  let handleSubmit = function() {
    if (this.formLoading)
      return

    this.$refs.form.validate(valid => {
      if (!valid)
        return

      this.formLoading = true

      //调用http协议
      this.$axios.post('/api/table/save', this.form).then(res => {
        this.formLoading = false
        if (!res.data.success) {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          });
          return
        }
        this.$message({
          type: 'success',
          message: '保存成功!'
        })

        //重新载入数据
        this.page = 1
        this.getRows()
        this.formVisible = false
      }).catch(e => this.formLoading = false)
    })
  }

  let handleQuery = function() {
    this.page = 1
    this.getRows()
  }

  let handleCurrentChange = function(val) {
    this.page = val
    this.getRows()
  }

  let initHeight = function() {
    this.clientHeight = (document.documentElement.clientHeight - 258) + 'px'
  }

  export default {
    data: data,
    methods: {
      //查询
      handleQuery,
      //添加
      handleAdd,
      //修改
      handleEdit,
      //删除
      handleDelete,
      //页数改变
      handleCurrentChange,
      //获取分页
      getRows,
      //初始化高度
      initHeight,
      //提交数据
      handleSubmit,
      //编辑字段
      handField,
      onSubmit
    },
    mounted: function() {
      window.addEventListener('resize', this.initHeight)
      this.initHeight()
      this.getRows()
    }
  }
</script>

<style scoped>
</style>
